<!--
 * @Author: lzz
 * @pageName: DataSource
 * @Date: 2019-08-03 17:04
 * @events
   @props
 -->

<template>
    <div class="jindu-main">
        <GisplusTitle></GisplusTitle>
        <p style="display: flex;padding-left: 100px;color: #fff;line-height: 32px">
            <el-button v-if="showType!=-1" type="text" size="mini" @click="initDataSource">
                <i class="iconfont icon-ffanhui-"></i>
            </el-button>
            {{view1_1_p.title}}
        </p>
        <echarts id="echarts1" :option="view1_1_data" :styles="styles1" @echarts-click="echartsClick"></echarts>
        <echarts id="echarts2" :option="view1_3_data" :styles="styles1"></echarts>
        <div class="jindu-title" style="text-align: center;margin-top: 50px">控制性工程</div>
        <div class="jindu-box-min">
            <div class="datasource-box" v-if="showType==3||showType==-1">
                <echarts id="echarts10" :option="view3_1_data" :styles="styles"></echarts>
            </div>
            <div class="datasource-box" v-if="showType==3||showType==-1">
                <echarts id="echarts11" :option="view3_2_data" :styles="styles"></echarts>
            </div>
            <div class="datasource-box" v-if="showType==4||showType==-1">
                <echarts id="echarts12" :option="view3_3_data" :styles="styles"></echarts>
            </div>
            <div class="datasource-box" v-if="showType==4||showType==-1">
                <echarts id="echarts13" :option="view3_4_data" :styles="styles"></echarts>
            </div>
            <div class="datasource-box" v-if="showType==4||showType==-1">
                <echarts id="echarts14" :option="view3_5_data" :styles="styles"></echarts>
            </div>
        </div>

    </div>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue'
  import GisplusTitle from '@/components/gisplus/GisplusTitle.vue'

  var lightBlue = {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(41, 121, 255, 1)', // 0% 处的颜色
      }, {
        offset: 1,
        color: 'rgba(0, 192, 255, 1)', // 100% 处的颜色
      }],
    globalCoord: false, // 缺省为 false
  }
  // 纹理
  var piePane = ''
  var piePatternImg = new Image()
  piePatternImg.src = piePane
  export default {
    name: 'DataSource',

    mixins: [],

    components: { echarts, GisplusTitle },

    props: {},

    data () {
      return {
        // 图一原始数据
        view1_1: {
          finshed: [],
          name: [],
          sum: [],
        },
        // 图一即时数据
        view1_1_p: {
          title: '',
          complete: [],
          list: [],
          total_design: [],
        },
        view1_2: {
          fwjsbaz: [],
          jagc: [],
          lhgc: [],
          ljgc: [],
          lmgc: [],
          lsgc: [],
          month: [],
          qlgc: [],
          sdgc: [],
          sjf: [],
        },
        // 进度图原始数据
        view1_3: {
          jhwc: [],
          month: [],
          sjwc: [],
        },
        // 进度图即时数据
        view1_3_p: {
          title: '',
          jhwc: [],
          month: [],
          sjwc: [],
        },

        view2_1: {
          list: [],
          complete: [],
          total_design: [],
        },
        view2_2: {
          list: [],
          complete: [],
          total_design: [],
        },
        view2_3: {
          list: [],
          complete: [],
          total_design: [],
        },
        view2_4: {
          list: [],
          complete: [],
          total_design: [],
        },
        view2_5: {
          list: [],
          complete: [],
          total_design: [],
        },
        view2_6: {
          list: [],
          complete: [],
          total_design: [],
        },
        view2_p: {
          list: [],
          complete: [],
          total_design: [],
        },
        view3_1: {
          list: [],
          complete: [],
          total_design: [],
        },
        view3_2: {
          list: [],
          complete: [],
          total_design: [],
        },
        view3_3: {
          list: [],
          complete: [],
          total_design: [],
        },
        view3_4: {
          list: [],
          complete: [],
          total_design: [],
        },
        view3_5: {
          list: [],
          complete: [],
          total_design: [],
        },
        styles1: {
          width: '14rem',
          height: '4.5rem',
          margin: '0 auto',
        },
        styles: {
          width: '7rem',
          height: '4rem',
          margin: '0 auto',
        },
        showType: -1,
      }
    },

    computed: {
      //1-1
      view1_1_data () {
        return {
          title: {
            text: this.view1_1_p.title,
            textStyle: {
              color: '#fff',
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left',
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff',
            },
            data: this.view1_1_p.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view1_1_p.total_design,
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view1_1_p.complete,
            },
          ],
        }
      },

      view1_3_data () {
        return {
          title: {
            text: this.view1_3_p.title,
            left: 'center',
            textStyle: {
              color: '#ccc',
            },
          },
          color: ['#ffdb5c', '#32c5e9'],
          tooltip: {
            trigger: 'axis',
            textStyle: {
              align: 'left',
            },
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            top: '10%',
            data: ['计划进度', '实际进度'],
            textStyle: {
              color: '#fff',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '8%',
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: this.view1_3_p.month,
              axisLine: {
                lineStyle: {
                  color: '#ffffff',
                },
              },
              axisLabel: {
                rotate: 30,
                color: '#ffffff',
                fontSize: 12,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#fff',
                },
              },
            },
          ],
          series: [
            {
              name: '计划进度',
              type: 'line',
              data: this.view1_3_p.jhwc,
            },
            {
              name: '实际进度',
              type: 'line',
              data: this.view1_3_p.sjwc,
            },
          ],
        }
      },
      //3-1
      view3_1_data () {
        return {
          title: {
            text: '新安一号桥',
            textStyle: {
              color: '#fff',
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left',
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '12%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff',
            },
            data: this.view3_1.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_1.total_design,
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_1.complete,
            },
          ],
        }
      },
      //3-2
      view3_2_data () {
        return {
          title: {
            text: '牙柄二号桥',
            textStyle: {
              color: '#fff',
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left',
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '12%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff',
            },
            data: this.view3_2.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_2.total_design,
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_2.complete,
            },
          ],
        }
      },
      //3-3
      view3_3_data () {
        return {
          title: {
            text: '白石山隧道',
            textStyle: {
              color: '#fff',
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left',
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '12%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff',
            },
            data: this.view3_3.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_3.total_design,
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_3.complete,
            },
          ],
        }
      },
      //3-4
      view3_4_data () {
        return {
          title: {
            text: '新安隧道',
            textStyle: {
              color: '#fff',
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left',
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '12%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff',
            },
            data: this.view3_4.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_4.total_design,
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_4.complete,
            },
          ],
        }
      },
      //3-5
      view3_5_data () {
        return {
          title: {
            text: '牙柄隧道',
            textStyle: {
              color: '#fff',
            },
            x: 'center',
          },
          color: ['#1c5fd6', '#8e06e5'],
          tooltip: {
            textStyle: {
              align: 'left',
            },
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          grid: {
            left: '8%',
            right: '4%',
            bottom: '17%',
            top: '12%',
          },
          calculable: true,
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
            axisLabel: {
              rotate: 30,
              fontSize: 12,
            },
            textStyle: {
              color: '#ffffff',
            },
            data: this.view3_5.list,
          },
          yAxis: {
            nameRotate: 30,
            axisLine: {
              lineStyle: {
                color: '#ffffff',
              },
            },
          },
          series: [
            {
              name: '总量',
              type: 'bar',
              barGap: 0,
              data: this.view3_5.total_design,
            },
            {
              name: '已完成',
              type: 'bar',
              data: this.view3_5.complete,
            },
          ],
        }
      },
    },

    watch: {},

    created () {
    },

    mounted () {
      this.getCzjd()
      this.getDataEngine()
      this.getDataControl()
    },

    destroyed () {
    },

    methods: {
      getCzjd () {
        let that = this
        return that.request.getCzjd().then(function (response) {
          console.log(response.content)
          let data = response.content
          that.view1_1 = data.gclx
          that.view1_1_p = {
            complete: that.view1_1.finshed,
            list: that.view1_1.name,
            total_design: that.view1_1.sum,
            title: '总体工程',
          }
          that.view1_2 = data.type_month
          that.view1_3 = data.status_month
          that.view1_3_p = {
            jhwc: that.view1_3.jhwc,
            month: that.view1_3.month,
            sjwc: that.view1_3.sjwc,
            title: '总体进度',
          }
        }).catch(function (error) {
          that.fetchError = error
        })
      },
      getDataEngine () {
        const that = this
        return that.request.getDataEngine().then(function (response) {
          console.log(response.data)
          let res = response.data
          that.view2_1 = res.road
          that.view2_2 = res.bridge
          that.view2_3 = res.tunnel
          that.view2_4 = res.pavement
          that.view2_5 = res.traffic
          that.view2_6 = res.electromechanical
        }).catch(function (error) {
          that.fetchError = error
        })
      },
      getDataControl () {
        const that = this
        return that.request.getDataControl().then(function (response) {
          console.log(response.data)
          let res = response.data
          that.view3_1 = res.bridge_1st
          that.view3_2 = res.bridge_2nd
          that.view3_3 = res.bsh_tunnel
          that.view3_4 = res.xa_tunnel
          that.view3_5 = res.yb_tunnel
        }).catch(function (error) {
          that.fetchError = error
        })
      },
      echartsClick (index, name) {
        let that = this
        if (name == '路基工程') {
          that.view1_1_p = this.view2_1
          that.view1_1_p.title = '路基工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '路基进度'
          that.view1_3_p.sjwc = that.view1_2.ljgc
          that.showType = index
        } else if (name == '桥梁工程') {
          that.view1_1_p = this.view2_2
          that.view1_1_p.title = '桥梁工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '桥梁进度'
          that.view1_3_p.sjwc = that.view1_2.qlgc
          that.showType = index
        } else if (name == '隧道工程') {
          console.log(index)
          that.view1_1_p = this.view2_3
          that.view1_1_p.title = '隧道工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '隧道进度'
          that.view1_3_p.sjwc = that.view1_2.sdgc
          that.showType = index
        } else if (name == '路面工程') {
          that.view1_1_p = this.view2_4
          that.view1_1_p.title = '路面工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '路面进度'
          that.view1_3_p.sjwc = that.view1_2.lmgc
          that.showType = index
        } else if (name == '交安工程') {
          that.view1_1_p = this.view2_5
          that.view1_1_p.title = '交安工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '交安进度'
          that.view1_3_p.sjwc = that.view1_2.jagc
          that.showType = index
        } else if (name == '临时工程') {
          that.view1_1_p = this.view2_p
          that.view1_1_p.title = '临时工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '临时工程'
          that.view1_3_p.sjwc = that.view1_2.lsgc
          that.showType = index
        } else if (name == '房屋及设备安装') {
          that.view1_1_p = this.view2_p
          that.view1_1_p.title = '房屋及设备安装'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '房屋及设备安装'
          that.view1_3_p.sjwc = that.view1_2.fwjsbaz
          that.showType = index
        } else if (name == '绿化工程') {
          that.view1_1_p = this.view2_p
          that.view1_1_p.title = '绿化工程'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '绿化工程'
          that.view1_3_p.sjwc = that.view1_2.lhgc
          that.showType = index
        } else if (name == '设计费') {
          that.view1_1_p = this.view2_p
          that.view1_1_p.title = '设计费'
          that.view1_3_p.jhwc = []
          that.view1_3_p.title = '设计费'
          that.view1_3_p.sjwc = that.view1_2.sjf
          that.showType = index
        }
      },
      initDataSource () {
        let that = this
        that.view1_1_p = {
          complete: that.view1_1.finshed,
          list: that.view1_1.name,
          total_design: that.view1_1.sum,
          title: '总体工程',
        }
        that.view1_3_p = {
          jhwc: that.view1_3.jhwc,
          month: that.view1_3.month,
          sjwc: that.view1_3.sjwc,
          title: '总体进度',
        }
        that.showType = -1
        console.log(that.showType)
      },
    },
  }
</script>

<style scoped>
    .datasource-box {
        width: 50%;
        margin-bottom: 20px;
    }

    .jindu-box-min {
        width: 14rem;
        margin: 0 auto;
    }
</style>
